import React from 'react'
import { Form, Input, Select, Switch, InputNumber, Upload, Button, message } from 'antd'
import { UploadOutlined } from '@ant-design/icons'
import request from '@/utils/request'
const { Option } = Select
const { TextArea } = Input


const layout = {
    labelCol: { span: 4 },
    wrapperCol: { span: 18 },
};

export default (props: any) => {

    const { form, close, info, getTree } = props;

    const onFinish = (values: any) => {

        values.pid = info.pid
        values.genre_id = Number(values.genre_id)

        if (values.upload && values.upload.length > 0) {
            values.logo = values.upload[0]['url'];
        }
        request(`/goods/category/${info.id}`, {
            method: 'POST',
            data: { ...values },
        }).then((result) => {
            getTree();
            close()
        })
    }

    const handleUploadChange = (info: any): any => {
        let fileList = info.fileList;
        fileList = fileList.slice(-1);
        if (info.file.status === 'done') {
            message.success(`${info.file.name}文件上传成功`);
            fileList[0].url = fileList[0]['response']['data']['filePath'];
        }
        return fileList
    };
    return (
        <Form
            {...layout}
            name="basic"
            initialValues={{ enable: true }}
            form={form}
            onFinish={onFinish}
        >
            <Form.Item
                label="分类名称："
                name="name"
                rules={[{ required: true, message: '请输入分类名称' }]}
            >
                <Input placeholder="请输入分类名称" />
            </Form.Item>
            <Form.Item
                label="分类简称："
                name="short_name"
                rules={[{ required: true, message: '请输入分类简称' }]}
            >
                <Input placeholder="请输入分类简称" />
            </Form.Item>
            <Form.Item label="商品类型" name="genre_id">
                <Select style={{ width: "200px" }}>
                    <Option value="1">
                        茶几
                    </Option>
                </Select>
            </Form.Item>

            <Form.Item label="是否可见" name="enable" valuePropName="checked">
                <Switch />
            </Form.Item>

            <Form.Item label="排序" name="sort">
                <InputNumber />
            </Form.Item>

            <Form.Item label="图片" name="upload" valuePropName="fileList" getValueFromEvent={handleUploadChange}>
                <Upload
                    action='http://127.0.0.1:8888/admin/tool/upload'
                    listType='picture'
                >
                    <Button>
                        <UploadOutlined /> Upload
                        </Button>
                </Upload>
            </Form.Item>


            <Form.Item
                label="关键字"
                name="keyword"
            >
                <Input placeholder="请输入关键字" />
            </Form.Item>

            <Form.Item
                label="描述"
                name="describe"
            >
                <TextArea placeholder="请输入描述" rows={3} />
            </Form.Item>
        </Form>
    );
}